<template>
  <div>
    <el-form ref="goodTypeS" :inline="true" :model="goodsTypeCl.goodsTypes" class="demo-form-inline">
      <el-form-item label="商品类型名称" prop="name">
        <el-input v-model="goodsTypeCl.goodsTypes.name" type="text" />
      </el-form-item>
      <el-form-item label="商品类型编码" prop="code">
        <el-input v-model="goodsTypeCl.goodsTypes.code" type="text" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchGoodsTypes()">搜索</el-button>
        <el-button type="primary" @click="reset(goodTypeS)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-button type="primary" @click="opendialog()">
          <el-icon>
            <Plus />
          </el-icon>
          添加商品类型
        </el-button>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-table :data="goodsTypeCl.treeGoodsTypes" :default-expand-all="false" row-key="id" stripe style="width: 100%">
      <el-table-column label="名称" prop="name" header-align="center" align="center" />
      <el-table-column label="编码" prop="code" header-align="center" align="center" />
      <el-table-column label="创建时间" prop="createTime" header-align="center" align="center" />
      <el-table-column label="介绍" header-align="center" align="center" :show-overflow-tooltip="true">
        <template #default="scope">
          <div v-html="scope.row.describes" />
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" header-align="center" label="操作">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="edit(scope.row.id)"> 编辑 </el-button>
          <el-popconfirm title="确定要删除吗?" @confirm="deleted(scope.row.id)">
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog v-model="goodsTypeCl.goodsDialog" destroy-on-close title="添加部门" @close="resetDialog(addRef)">
      <el-form ref="addRef" :model="goodsTypeCl.goodsEidt" :rules="goodsTypeCl.rules">
        <el-form-item label="父类" prop="pid">
          <el-select v-model="goodsTypeCl.goodsEidt.pid" placeholder="父类">
            <el-option v-for="item in goodsTypeCl.selectGoodTypeData" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品类型名称" prop="name">
          <el-input v-model="goodsTypeCl.goodsEidt.name" placeholder="商品类型名称" type="text" />
        </el-form-item>
        <el-form-item label="图标" prop="iconUrl">
          <ImgUpload v-model:file_url="goodsTypeCl.goodsEidt.iconUrl" :file_max="1" />
        </el-form-item>
        <el-form-item label="介绍" prop="describes">
          <Editor v-model:editorValue="goodsTypeCl.goodsEidt.describes"></Editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editGoodsType">保存 </el-button>
          <el-button @click="goodsTypeCl.goodsDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <Page :pageData="goodsTypeCl.goodsTypes" @selectPage="searchGoodsTypes"></Page>
</template>
<script lang="ts" setup>
import { goodsTypeClass, goodsTypeInfo, goodsTypeS } from '@/page/types/sale/goodsType'
import { addGoodsType, delGoodsType, detailGoodsType, goodsTypesPage, selectGoodsTypes, updateGoodsType } from '@/api/sale'
import Editor from '@/components/MyEditor.vue'
import { ElMessage, FormInstance } from 'element-plus/es'
import { baseTreeInfo } from '@/page/types/base/baseTree'
import ImgUpload from '@/components/ImgsUpload.vue'

const goodsTypeCl = reactive(new goodsTypeClass())
const goodTypeS = ref()
const addRef = ref()
const searchGoodsTypes = () => {
  goodsTypesPage(goodsTypeCl.goodsTypes).then(res => {
    goodsTypeCl.treeGoodsTypes = res.data.records
    goodsTypeCl.goodsTypes.page = res.data.current
    goodsTypeCl.goodsTypes.size = res.data.size
    goodsTypeCl.goodsTypes.total = res.data.total
  })
}
const selectGoodsType = () => {
  selectGoodsTypes(null).then(res => {
    goodsTypeCl.selectGoodTypeData = res.data as baseTreeInfo[]
  })
}
const resetDialog = (rest: FormInstance | undefined) => {
  if (!rest) return
  rest.resetFields()
  goodsTypeCl.goodsEidt = {} as goodsTypeInfo
}
const reset = (rest: FormInstance | undefined) => {
  if (!rest) return
  rest.resetFields()
  goodsTypeCl.goodsTypes = {} as goodsTypeS
}
const opendialog = () => {
  goodsTypeCl.goodsDialog = true
  selectGoodsType()
}
const edit = (id: string) => {
  selectGoodsType()
  detailGoodsType(id).then(res => {
    goodsTypeCl.goodsEidt = res.data as goodsTypeInfo
    goodsTypeCl.goodsDialog = true
  })
}
const editGoodsType = () => {
  if (goodsTypeCl.goodsEidt.id) {
    updateGoodsType(goodsTypeCl.goodsEidt).then(res => {
      searchGoodsTypes()
      ElMessage({
        message: '更新岗位信息成功',
        type: 'success'
      })
    })
  } else {
    addGoodsType(goodsTypeCl.goodsEidt).then(res => {
      searchGoodsTypes()
      ElMessage({
        message: '保存岗位信息成功',
        type: 'success'
      })
    })
  }
  goodsTypeCl.goodsDialog = false
}
const deleted = (id: string) => {
  delGoodsType(id).then(res => {
    searchGoodsTypes()
    ElMessage({
      message: '删除岗位信息成功',
      type: 'success'
    })
  })
}
onMounted(() => {
  searchGoodsTypes()
})
</script>
<style lang="scss" scoped>
.el-select {
  width: 200px;
}
</style>
